/*public*/
*, *:after, *:before {-webkit-box-sizing: border-box; box-sizing: border-box}
.con_pad{padding:20px;*zoom:1}
a:hover{ text-decoration:none;}
/*hover_line*/
.hover_line {width: 100%;height: 100%;background: transparent;left: 0%;top:0%;cursor: pointer;position: absolute;opacity: 1;-webkit-transition: all .8s ease-in-out;-moz-transition: all .8s ease-in-out;-ms-transition: all .8s ease-in-out;-o-transition: all .8s ease-in-out;transition: all .8s ease-in-out}
.hover_line::before,.hover_line::after {position: absolute;top: 20px;right: 20px; z-index:1;bottom: 20px;left: 20px;content: '';opacity: 0;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;}
.hover_line::before {border-top: 1px solid;border-bottom: 1px solid;-webkit-transform: scale(0,1);transform: scale(0,1);opacity: 0}
.hover_line::after {border-right: 1px solid;border-left: 1px solid;-webkit-transform: scale(1,0);transform: scale(1,0);opacity: 0}
.effect-line a:hover.hover_line::before,.effect-line a:hover.hover_line::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1)}
/*img zoom*/
.zoom{overflow:hidden}
.zoom figure{ overflow:hidden}
.zoom figure img{transition: .7s;-moz-transition: .7s;-webkit-transition: .7s;-o-transition: .7s;line-height: 1em; min-height:auto; max-width:100%;min-height: auto;max-width: 100%;position: absolute;top: 0;left: 0;}
.zoom:hover figure img{transform: scale(1.2);-webkit-transform: scale(1.2);-o-transition: scale(1.2)}

/*fourth*/
.fourth{ padding:20px 0; text-align:center; backgr ound-image:url(../images/bg.jpg);}
.case-list li{position:relative; float:left; width:25%; display:inline-block}
.case-list li figure{overflow: hidden;position: relative;padding-bottom: 66%;}
.case-list li a{position:absolute; left:0; top:0;width:100%; height:100%;background:#000; opacity:0; color:#fff;}
.case-list li a:hover{opacity:1; background:rgba(0,0,0,0.7)}
.case-list li i{background:url(../images/url_icon.png) no-repeat; margin:0 auto; margin-top:15%; width:88px; height:88px; background-size:100%; display:block;transition: .7s;-moz-transition: .7s;-webkit-transition: .7s;-o-transition: .7s;}
.case-list li a:hover i{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
.case-list li p{ margin:10px 30px;font-size:16px}


@media (min-width: 768px) and (max-width: 979px) {
.fourth{padding:50px 0}
.case-list li i{ width:50px; height:50px}
.case-list li p{ margin:0 20px;font-size:12px}
.case-list .hover_line::before,.case-list .hover_line::after {top: 10px;right: 10px;bottom: 10px;left: 10px}
}

@media (min-width: 768px) and (max-width: 979px) {
.fourth{padding:50px 0}
.case-list li i{ width:50px; height:50px}
.case-list li p{ margin:0 20px;font-size:12px}
.case-list .hover_line::before,.case-list .hover_line::after {top: 10px;right: 10px;bottom: 10px;left: 10px}
}
@media (max-width: 767px) {
.fourth{padding:30px 0; background-size:cover;}
.case-list li{width:50%;}
}
@media (max-width: 479px) {
.case-list li{float:none; margin:0 auto; display:block;width:300px;}
}